<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  <title>表单</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .container {
      max-width: 800px;
      margin: o auto;
    }

    .head {
      height: 48px;
      line-height: 48px;
      text-align: center;
      border-bottom: 1px solid #a7a7a7;
      margin-bottom: 40px;
      font-size: 18px;
    }

    .row {
      padding: 0 20px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      justify-content: center;
    }

    .label {
      width: 60px;
      margin-right: 10px;
    }

    input {
      border: 1px solid #ececec;
      border-radius: 0;
      outline: none;
      height: 36px;
      padding: 0 10px;
      width: 220px;
    }

    input::placeholder {
      color: #a7a7a7;
    }

    button {
      margin: 0 auto;
      display: block;
      margin-top: 80px;
      width: 290px;
      height: 42px;
      background-color: #03a9f4;
      border: none;
      line-height: 42px;
      color: white;
      letter-spacing: 10px;
      font-size: 18px;
      outline: none;
      border-radius: 8px;
    }

    .loading {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      text-align: center;
      line-height: 80vh;
      color: rgba(255, 255, 255, 0.8);
      font-size: 18px;
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="head">完善绑定信息</div>

    <div class="row">
      <div class="label">姓名:</div>
      <input id="name" type="text" placeholder="请输入真实姓名">
    </div>

    <div class="row">
      <div class="label">手机号:</div>
      <input id="phone" type="text" placeholder="请输入真实在用手机号">
    </div>

    <div class="row">
      <div class="label">职务:</div>
      <input id="post" type="text" placeholder="请输入真实职务名称">
    </div>


    <button>保存</button>
  </div>

  <div class="loading">
    loading...
  </div>
</body>

<script>
  let openId = "";
  let isAsking = false;
  $(document).ready(async function () {
    if (!_isWx()) {
      alert("请在微信内打开");
      return
    }
    openId = await getOpenId();
    bindSubmit();
  })

  function _isWx() {
    const ua = navigator.userAgent.toLowerCase();
    return ua.includes("micromessenger");
  }

  function getOpenId() {
    return new Promise((resolve) => {
      let query = _parseQuery(location.href.split("?")[1]);
      let code = query.code;
      fetch(`/admin/wx/auth/${code}`)
        .then(function (res) {
          return res.json()
        }).then(res => {
          resolve(res.msg);
        })
    })
  }

  function _parseQuery(query) {
    let reg = /([^=&\s]+)[=\s]*([^=&\s]*)/g;
    let obj = {};
    while (reg.exec(query)) {
      obj[RegExp.$1] = RegExp.$2;
    }
    return obj;
  }

  function bindSubmit() {
    $("button").click(function () {
      // 校验
      let name = $("#name").val();
      let phone = $("#phone").val();
      let post = $("#post").val();

      if (!name || !phone || !post) {
        // 有空
        alert("所有选项均为必填项");
        return
      }

      if (name.length <= 1 || name.length > 5) {
        alert("姓名长度不合法");
        return
      }

      if (phone.length !== 11) {
        alert("手机号长度不合法");
        return
      }

      if (post.length <= 1) {
        alert("职务长度不合法")
        return
      }

      if (isAsking) return;

      isAsking = true;
      let formUrl = "/admin/wx/fill";
      fetch(formUrl, {
        method: "POST",
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name, phone, post, openId
        })
      })
        .then(function (res) {
          return res.json()
        })
        .then(function (json) {
          isAsking = false;
          if (json.code === 200) {
            alert("保存成功");
            wx.closeWindow();
          } else {
            alert(json.msg);
          }
        })
    })
  }
</script>

</html>
<!-- https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx72c0042994b2a84b&redirect_uri=http%3A%2F%2Fjyt-demo.jsxhfh.com%2Fuser.html&response_type=code&scope=snsapi_userinfo&state=&connect_redirect=1#wechat_redirect -->